<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">

    <title>xbui-数据列表</title>
    
    <meta content="all" name="robots" /><!--爬虫设置--> 
    <meta name="keywords" content="网页关键字" />
    <meta name="description" content="网页描述" />
    <meta name="author" content="网页作者">
    <meta name="copyright" content="网页版权描述" />

    <!--favicon-->  
    <link href="favicon.ico" rel="bookmark" type="image/x-icon" /> 
    <link href="favicon.ico" rel="icon" type="image/x-icon" /> 
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <!-- //favicon -->

    <!-- 检测浏览器 -->
    <noscript>你的浏览器已禁用javascript，请启用javascript，否则网页将非正常运行！</noscript>
    <!-- BASE JS -->
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-easing/1.4.1/jquery.easing.min.js"></script>

    <!-- zui-1.5.0 -->
    <link href="http://cdn.bootcss.com/zui/1.5.0/css/zui.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/zui/1.5.0/js/zui.min.js"></script>

    <!-- 布局，版面 -->
    <link rel="stylesheet" href="css/xbui.lib.css">
    <link rel="stylesheet" href="css/xbui.navigation.css">
    <link rel="stylesheet" href="css/xbui.slide.css">
    <link rel="stylesheet" href="css/xbui.footer.css">
    <link rel="stylesheet" href="css/xbui.datalist.css">
    
    
    <script src="http://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
    <script src="js/xbui.interaction.js"></script>
    <script src="js/xbui.common.run.js"></script>

    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  
    
  </head>
  <body>
  <body>
  <!--[if lt IE 8]>
    <div class="alert alert-danger">您正在使用 <strong>过时的</strong> 浏览器. 是时候 <a href="http://browsehappy.com/">更换一个更好的浏览器</a> 来提升用户体验.</div>
  <![endif]-->

  <!-- 外套 -->
  <div class="layout">
    <div class="wrapper" id="wrapper">
      <div class="container w-p100 p-n">
        <!-- 页头 -->
        <header class="header">
          <nav class="navbar-top pr">
            <div class="container w-1200  p-n">
              <!-- left nav -->
              
            </div>
          </nav>

          <nav class="navbar navbar-main">
            <div class="container w-1100 p-n pr">
              <!-- 分类 -->
              <!-- navbar -->
              

            </div>
          </nav>
        </header>
       
        <!-- 主体 -->
        <div class="main">
          <div class="mainwrap">
              <div class="container w-1100">
                  <!-- 图文列表 1-->
                  <div class="xb-list list-space list-space-10" role="datalist" data-toggle="fade" data-cell=".list-item" data-mask=".item-layer">
                      <ul class="row">
                          <li class="col-xs-6 col-md-6 list-item">
                            <div class="inner-wrap">
                                <a href="#" class="item-media block">
                                  <img lay-src="http://www.xiaobing360.com/Websites/xiaobingv2/Uploads/Picture/2016-07-26/579730d2e82f7.jpg">
                                  <div class="item-layer">
                                    <div class="icon">
                                      查看
                                    </div>
                                  </div>
                                </a>
                                <div class="item-content">
                                  <a href="#" class="title">金玉满堂二期开盘</a>
                                  <div class="desc">
                                    xbui采用MIT开源协议，将会永久性提供无偿服务。
                                  </div>
                                  <time class="time">2017/2/20</time>
                                </div>
                            </div>
                          </li>
                
                      </ul>
                  </div>

                  <h1>在建工地列表</h1>

                  <div class="xb-list list-gongdi" role="datalist" effect="fade">
                      <ul class="row">
                          <li class="list-item">
                            <div class="inner-wrap clearfix">
                                <a href="#" class="item-media block">
                                  <img src="http://fakeimg.pl/350x200/">
                                  <div class="item-layer">
                                    <div class="icon">
                                      查看
                                    </div>
                                  </div>
                                </a>
                                <div class="item-content">
                                  <div class="clearfix">
                                      <a href="#" class="title fl">金玉满堂二期开盘</a>
                                      <a href="javascript:void(0)" onclick="javascript:show(&quot;input_zjgd&quot;)" class="btn-order fr">我要预约参观工地</a>
                                  </div>
                                  <div class="desc clearfix">
                                    <p class="fl desc-01">地址：深圳龙岗区坂雪岗大道<br>施工阶段：验收完工</p>
                                    <p class="fr desc-02">现代简约<span>2318次浏览</span></p>
                                  </div>
                                  <ul class="nav nav-pills nav-justified step step-round">
                                    <li class="active">
                                    <a>开工大吉</a>
                                    </li>
                                    <li class="active">
                                    <a>水电改造</a>
                                    </li>
                                    <li class="active">
                                    <a>泥瓦阶段</a>
                                    </li>
                                    <li>
                                    <a>木工阶段</a>
                                    </li>
                                    <li>
                                    <a>油漆阶段</a>
                                    </li>
                                    <li>
                                    <a>安装阶段</a>
                                    </li>
                                    <li>
                                    <a>验收完工</a>
                                    </li>

                                  </ul>
    

                                </div>
                            </div>
                          </li>
                          <li class="list-item">
                            <div class="inner-wrap clearfix">
                                <a href="#" class="item-media block">
                                  <img src="http://fakeimg.pl/350x200/">
                                  <div class="item-layer">
                                    <div class="icon">
                                      查看
                                    </div>
                                  </div>
                                </a>
                                <div class="item-content">
                                  <div class="clearfix">
                                      <a href="#" class="title fl">金玉满堂二期开盘</a>
                                      <a href="javascript:void(0)" onclick="javascript:show(&quot;input_zjgd&quot;)" class="btn-order fr">我要预约参观工地</a>
                                  </div>
                                  <div class="desc clearfix">
                                    <p class="fl desc-01">地址：深圳龙岗区坂雪岗大道<br>施工阶段：验收完工</p>
                                    <p class="fr desc-02">现代简约<span>2318次浏览</span></p>
                                  </div>
                                  <ul class="nav nav-pills nav-justified step step-round">
                                    <li class="active">
                                    <a>开工大吉</a>
                                    </li>
                                    <li class="active">
                                    <a>水电改造</a>
                                    </li>
                                    <li class="active">
                                    <a>泥瓦阶段</a>
                                    </li>
                                    <li>
                                    <a>木工阶段</a>
                                    </li>
                                    <li>
                                    <a>油漆阶段</a>
                                    </li>
                                    <li>
                                    <a>安装阶段</a>
                                    </li>
                                    <li>
                                    <a>验收完工</a>
                                    </li>

                                  </ul>

                                </div>
                            </div>
                          </li>
                      </ul>
                  </div>
              
              </div>
          </div>
        </div>

        <!-- 页尾 -->
        <footer class="footer">

         
          
          
        </footer>

      </div>
    </div>
  </div>

</body>
</html>